<template>
    <el-container class="layout">
        <div class="aside-split">
            <div class="logo fix-center">
                <img src="@/assets/images/logo.svg" alt="" />
            </div>
            <el-scrollbar>
                <div class="split-list" v-for="(item, index) in routeList " :key="item.name">
                    <div class="split-item" :class="{ 'split-active': splitActive == item.path  }" @click="changeSubMenu(item, index)">
                        <i class="iconfont fs" :class="[item.icon]"></i>
                        <span class="title">{{ item.labol }}</span>
                    </div>
                </div>
            </el-scrollbar>

        </div>

        <el-aside :class="{ 'not-aside': submenu.length == 0 }" style="width:210px;">
            <div class="logo flx-center">
                <span>Ag</span>
            </div>
            <el-scrollbar>
                <el-menu :default-active="activeMenu"  :router="false" background-color="#ffffff"
                    :collapse-transition="false">
                    <Menu :routeArr="submenu"></Menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header>
                <ToolBarLeft></ToolBarLeft>
                <ToolBarRight></ToolBarRight>
            </el-header>
            <Main></Main>
        </el-container>
    </el-container>
</template>

<script setup>
import ToolBarLeft from "../components/header/toolBarLeft.vue";
import ToolBarRight from "../components/header/toolBarRight.vue";
import Main from "../components/main/index.vue";


import { mainStore } from "@/stores"
import { ref, computed, onMounted } from "vue"
import Menu from "../components/menu/submenu.vue";

import { useRoute,useRouter} from "vue-router"


let route = useRoute()
let router = useRouter()

let active = ref(0)

let mStore = mainStore()

let routeList = computed(() => {
    return mStore.routeArr
})

let splitActive = ref("")

let submenu = ref([])

// let menuList = computed(()=>{
//     console.log(mStore.routeArr)
// })



let activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path))

const changeSubMenu = (item, index) => {
    // console.log(item)
    if (item.children) {
        // console.log("有孩子喔")
        submenu.value = item.children
    } else {
        // console.log(item)
        // console.log("无孩子喔")
        router.push({
           path:item.path
        })
        submenu.value = []
    }
    // console.log(item.path)
    splitActive.value = item.path
    active.value = index
}

// 初始化submenu
const initMenu = ()=>{
    let newMenu = mStore.routeArr.filter((item)=>{
        // console.log(item,"filter")
       return item.path == "/"+route.path.split("/")[1]
    })

    // console.log(newMenu[0].children.length,"newMenu")
    // 初始化submenu
    submenu.value = newMenu[0]?.children?.length?newMenu[0].children:[]
    // 初始化Active
    splitActive.value ="/"+route.path.split("/")[1]
}


onMounted(() => {
 
  initMenu()
})

</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

<style lang="scss" scoped>
        .layout{
            .el-menu,.el-menu--popup{
                :deep(.el-menu-item){
                    &.is-active{
                        background: var(--el-color-primary-light-9);
                        &::before{
                            position:absolute;
                            top: 0;
                            right: 0;
                            bottom:0;
                            width: 4px;
                            content: "";
                            background: var(--el-color-primary);
                        }
                    }
                }
            }   
        }

</style>